<template>
  <div>
    <a-table size="small" bordered :data-source="tableData" :pagination="false">
      <a-table-column
        key="schemeName"
        data-index="schemeName"
        align="center"
        width="25%"
      >
        <span slot="title">收费方案</span>
        <template slot-scope="text, record">
          <a href="javascript:;" @click="editScheme(record)">
            {{ record.schemeName }}
          </a>
          <span class="defualt" v-if="record.defualt"> 默认 </span>
        </template>
      </a-table-column>
      <a-table-column
        key="remarks"
        data-index="remarks"
        align="center"
        width="25%"
      >
        <span slot="title">方案备注</span>
        <template slot-scope="text, record">
          {{ record.remarks || "无" }}
        </template>
      </a-table-column>
      <a-table-column key="count" data-index="count" align="center" width="25%">
        <span slot="title">客户数</span>
        <template slot-scope="text, record">
          <a href="javascript:;" @click="clientNum(record)">
            {{ record.count || 0 }}
          </a>
        </template>
      </a-table-column>
    </a-table>
    <SetCostModal v-if="flag" @delModal="delModal" :getTabList="getTabList" />
  </div>
</template>

<script>
import SetCostModal from "@/components/system/setManage/setRule/SetCostModal";
export default {
  props: ["tableData"],
  components: {
    SetCostModal,
  },
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    //销毁子组件
    delModal() {
      setTimeout(() => {
        this.flag = false;
      }, 50);
    },
    //点击客户数
    clientNum(row) {
      this.$emit("goClient", row);
    },
    //查看规则
    editScheme(record) {
      this.flag = true;
      setTimeout(() => {
        this.$bus.$emit("editScheme", true, record, "edit", "look");
      }, 50);
    },
    getTabList() {},
  },
};
</script>

<style lang="less" scoped>
.defualt {
  margin-left: 10px;
  display: inline-block;
  width: 50px;
  padding: 2px 5px;
  background-color: rgb(62, 174, 124);
  color: #fff;
  border-radius: 5px;
}
</style>